<template>
    <div>
        <!-- 将子组件挂在到页面上面，并且:传递数据的名字="传递的值" 的方式进行传值 -->
        <!-- :isfull="true" 是为了让轮播图的图片宽度是100%  给子组件传值-->
       <swiper :listData="listData" :isfull="true"></swiper>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<router-link to="/home/newsList">
									<img src=../../images/menu1.png alt="">
									<div class="mui-media-body">新闻资讯</div>
								</router-link>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<router-link to="/home/photos">
									<img src=../../images/menu2.png alt="">
									<div class="mui-media-body">图片分享</div>
								</router-link>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<router-link to="/home/goodslist">
									<img src=../../images/menu3.png alt="">
									<div class="mui-media-body">商品购买</div>
								</router-link>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<a href="#">
									<img src=../../images/menu4.png alt="">
									<div class="mui-media-body">留言反馈</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<a href="#">
									<img src=../../images/menu5.png alt="">
									<div class="mui-media-body">视频专区</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<a href="#">
									<img src=../../images/menu6.png alt="">
									<div class="mui-media-body">联系我们</div>
								</a>
							</li>
						</ul>
    </div>
</template>


<script>
//引入子组件
import swiper from '../subcomponent/swiper.vue'
import { Toast } from 'mint-ui'
 export default {
    data: function(){
        return {
            listData: ''
        }
    },
    created: function(){
         this.getData()
    },
    methods: {
        getData: function(){
            this.$http.get('http://127.0.0.1:4000/').then(res => {
                 //console.log(res)
                 if(res.status != 200 || res.ok != true){
                     Toast('获取失败')
                 }else{
                    //  Toast('获取成功')
                     this.listData = res.body.listdata;
                    
                 }
            }).catch(e => {
                console.log(e)
            })
        
        }
    },
    //定义子组件
    components: {
        swiper: swiper
    }
}       
    
</script>

<style lang="scss" scoped>
    
    .mui-grid-view.mui-grid-9 {
        background: #fff;
        .mui-table-view-cell{
            border: none;
            img {
                width: 60px;
            }
            .mui-media-body {
                font-size: 14px;
            }
        }
    }
    
</style>
